<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewpor" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 父组件在部署子组件的时候 给其传入props -->
        <!-- 父传子 props-down -->
        <!-- <blog :title="title" :fs="fs"></blog> -->

        <!-- <blog :title="title" :fs="fs" @enlarge="fs += $event"></blog> -->

        <!-- @enlarge="onEnlarge" 响应子组件的自定义事件enlarge 用onEnlarge函数处理之 -->
        <blog :title="title" :fs="fs" @enlarge="onEnlarge"></blog>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return {
                    title:"你做核酸的时候你老婆跟人跑了",
                    fs:20
                }
            },
            methods:{
                // 自定义事件处理函数 e是事件携带的数据
                onEnlarge(e){
                    console.log("onEnlarge",e);
                    this.fs += e
                }
            }
        })

        app.component("blog",{

            // 声明接收父组件注入的props
            props:["title","fs"],

            // 向父组件发送的自定义事件
            emits:["enlarge"],

            template:`
            <div class="blog-post">
                <h4 :style="{fontSize:fs + 'px'}">{{title}}</h4>

                <!-- 发送自定义事件 事件类型叫enlarge 携带的数据是2 -->
                <button @click="$emit('enlarge',2)">放大</button>
            </div>
            `
        })
        
        app.mount('#app')
    </script>
</body>

</html>